<template>

    <div class="brandArea">
        <div class="slider">
            <div v-for="val of  list||[]" class="brand" @click="selectBrand(val)" :style="{'margin':'0 '+ picDistance/2+'px '+ picDistance+'px '+ picDistance/2+'px'}">
                <img :src="val.pic+'?imageView2/1/w/200/h/200'" :style="{'width':picLength+'px'}">
                <h6 class="brand-title" :style="{'line-height':brandTitleLineHeight+'px',width:picLength+'px'}">{{val.name}}</h6>
            </div>
        </div>
        <div v-if="list&&list.length>0" class="brand-clear" :style="{'margin-top':brandHeight+'px'}"
             @click="selectBrand()">清除所选
        </div>
        <div v-else class="brand-default ui-v-a"><span>暂时没有品牌</span></div>
    </div>

</template>

<script>
    import IScroll from 'iscroll';
    import http from '../libs/http'

    export default{
        props: ['selected_cate_id'],

        data(){
            return {
                map: {},
                list: [],
                needRefresh: true,
                rowBrandCount: 4,
                picDistance: 10,
                brandTitleLineHeight: 15
            }
        },
//        activate:function(){
//            console.log('1111');
//        },

        computed: {
            picLength: function () {
                return (db.w -16) / this.rowBrandCount - this.picDistance;
            },

            brandHeight: function () {
                var row = Math.ceil(this.list.length / this.rowBrandCount);
                return row * (this.picLength + this.brandTitleLineHeight) + (row ) * this.picDistance +10;
            }

        },

        watch: {

            //selected_cate_id后需要刷新数据
            selected_cate_id: function (nVal, oVal) {
                this.needRefresh = true;
            }
        },

        attached: function () {


//            new IScroll('.brandArea', {
//                tap: true,
//                scrollX: true,
//                scrollY: false
//            });

            var self = this;

            if (this.needRefresh) {
                this.needRefresh = false;
                self.list = [];  //先清空，防止页面跳动
                self.map = {};

                http.get({
                            url: api + 'commodity/list/brand',
                            jsonp: true,
                            data: {category_id: self.selected_cate_id}
                        })
                        .then(function (obj) {
                            if (obj.code == 0) {

                                var data = obj.data || [];

                                var tmp = {};
                                data.forEach(function (v) {
                                    tmp[v._id] = v;
                                });

                                self.map = tmp;
                                self.list = data;
                            } else {
                                //   alert(obj.msg);
                            }
                        })
            }
        },
        methods: {
            selectBrand: function (selectedBrand) {
                this.$dispatch('change-brand', selectedBrand);
            }
        }
    }
</script>

<style scoped>
    .brandArea {
        border-bottom: solid 1px #dddddd;
        overflow: hidden;
        z-index: 15;
        top: 37px;
        left: 0;
        position: fixed;
        width: 100%;
        background: #f0f0f0;
        transition: height 0.3s;
        -webkit-transition: height 0.3s;
    }

    .brandArea > .slider {
        position: absolute;
        padding: 8px;
    }

    .brandArea .brand {
        display: inline-block;
    }
    .brand-title{
        white-space: nowrap;
        overflow: hidden;
    }

    /*.brandArea .brand > img {*/
    /*width: 80px;*/
    /*height: 80px;*/
    /*}*/

    .brandArea .brand > h6 {
        font-size: 10px;
        font-weight: lighter;
    }

    .brand-default {
        height: 100px;
        font-size: 12px;
        color: #888888;
    }

    .brand-clear {
        font-size: 12px;
        height: 20px;
        line-height: 20px;
        margin: 120px 8px 0 8px; /*动态计算*/
        padding-top: 2px;
        border-top: solid 1px #dddddd;
        text-align: center;
        color: #888888;
    }
</style>